<template>
  <nf-form
    v-form-drag="extendFormProps"
    :model="_meta"
    :partModel="_partMeta"
    v-bind="extendFormProps"
  >
  </nf-form>
</template>

<script>
import { reactive, watch } from 'vue'
import { nfForm, formItem } from '../map'
import { extendSetup } from './miniMeta'
import { state } from '../main'

import item_number from '../json/item-number.json'

const _temp = {
  110: `<el-input-number
  v-model="num"
  v-bind="itemProps"
/>`,
  111: `<el-slider
  v-model="num"
  v-bind="itemProps"
/>`,
  112: `<el-rate
  v-model="num"
  v-bind="itemProps"
/>`
}

</script>

<script setup>
 // 定义属性，接收传递来的 meta
  const props = defineProps({
    temp: Object, // 返回模板
    miniMeta: Object, // 返回精简属性
    mainMeta: Object // 基础属性，获取控件类型
  })
  
  // 设置模板
  watch(() => state.itemMeta.controlType, (type) => {
    state.outputItem.temp.html = _temp[type]
    state.outputItem.temp.name = 'itemProps'
  }, {immediate: true})
  
  // 文本类扩展属性表单，需要的 meta
  const extendFormProps = reactive(item_number)
  
  const {
    _meta,
    _partMeta
  } = extendSetup(props, item_number.itemMeta)

</script>